<template>
	<div class="full_com body-box spjz_com">
		<div class="title-box">
			<el-menu :default-active="activeRoute" class="el-menu-vertical-demo" background-color="rgba(0,0,0,0)" text-color="#fff"
			 active-text-color="#ffd46e" router>
				<el-menu-item :index="item.index" v-for="item of menuList" :key="item.index">
					<i :class="item.icon"></i>
					{{item.name}}
				</el-menu-item>
			</el-menu>
		</div>
		<div class="pf" style="overflow: hidden;">
			<transition name="fade-transform" mode="out-in">
				<router-view></router-view>
			</transition>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			tableBox: () => import('../tableBox/index.vue'),
			tabs: () => import('../tabs/index.vue'),
		},
		data() {
			return {
				menuList: [{
					index: 'flagList',
					icon: 'el-icon-guide',
					name: '广告位管理'
				}, {
					index: 'adList',
					icon: 'el-icon-files',
					name: '广告列表'
				}]
			}
		},
		computed: {
			activeRoute() {
				var src = ''
				for (var i = 0; i < this.menuList.length; i++) {
					var item = this.menuList[i]
					if (this.$route.fullPath.indexOf(item.index) !== -1) {
						src = item.index
					}
				}
				return src
			}
		}
	}
</script>

<style scoped>
	.body-box {
		color: #fff;
	}

	.title-box {
		width: 200px;
		height: 100%;
	}

	.el-menu-vertical-demo {
		min-height: 100%;
	}

	.el-menu {
		border-right: 2px solid rgba(255, 255, 255, 0.2);
	}
</style>


<style>
	.el-menu-item {
		background-color: transparent !important;
		font-size: 12px;
	}

	.el-menu-item:hover {
		background-color: rgba(72, 143, 206, 0.2) !important;
	}
</style>
